<template>
     <el-row type="flex" justify="space-between" :gutter="20">
        <el-col :xs="8" :sm="10" :md="8" :lg="8" :xl="8">
            <span style="padding-bottom: 10px" class="font-size-14 mt10 mb10 display-inline font-bold">账户二维码</span>
            <div id="qrcode" ref="qrCodeUrl" v-if="qrCodeUrlIsShow"></div>
            <p style="padding-top: 15px" class="font-size-14">请打开微信扫码，申请绑定公司账户</p>
        </el-col>
        <el-col>
          <span class="font-size-14">扫码绑定后,请点击<a style="color: #2d8cf0;"  @click="getWechartQr">刷新</a></span>
            <el-table
                v-loading="loading"
                :data="applyUserList"
                height="300"
            >
                <af-table-column label="微信头像">
                  <template slot-scope="scope">
                    <el-image style="width: 40px;" :src="scope.row.headimg"/>
                  </template>
                </af-table-column>
                <af-table-column label="微信昵称" prop="nick"></af-table-column>
<!--                <af-table-column label="微信账号名" prop="name"></af-table-column>-->
                <af-table-column label="状态">
                  <template slot-scope="scope">
                    <span v-if="scope.row.auditstatus === 1">已通过</span>
                    <span v-else>待审核</span>
                  </template>
                </af-table-column>
                <af-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="primary"
                            v-if="scope.row.auditstatus === 0"
                            @click="handleApprove(scope.row)"
                        >通过</el-button>
                        <el-button
                            size="mini"
                            type="warning"
                            v-if="scope.row.auditstatus === 0"
                            @click="handleReject(scope.row)"
                        >拒绝</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            v-if="scope.row.auditstatus === 1"
                            @click="handleDelete(scope.row)"
                        >删除</el-button>
                    </template>
                </af-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>

<script>
import QRCode from "qrcodejs2"
import store from '@/store'
import { getWechatList,agreeToBind,delBinding } from "@/api/storage/user"

export default {
    data() {
        return {
            loading: false,
            qrCodeUrlIsShow: false,
            applyUserList:[],
            queryParams:{
              nick:'',
              name:''
            }
        }
    },
    created() {
        this.binding()
        this.getWechartQr()
    },
    methods: {
      getWechartQr() {
        this.loading = true
        getWechatList(this.queryParams).then((res) => {
          this.applyUserList = res.data
        })
        this.loading = false
      },
        binding() {
            if(this.qrCodeUrlIsShow === false) {
                this.qrCodeUrlIsShow = true
                var that = this
                setTimeout(() => {
                    new QRCode(that.$refs.qrCodeUrl, {
                        // 微信扫一扫跳转到绑定界面
                        text: window.location.origin + '/wx/binding?userName=' + store.getters.name,// 需要转换为二维码的内容
                        width: 230,
                        height: 230,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H
                    })
                    document.getElementById("qrcode").setAttribute("title","")
                }, 100)
            }
        },
        handleApprove(row) {
          agreeToBind(row.id).then((res) => {
            if (res.code !== 200) {
              this.$modal.msgError(response.msg);
            } else {
              this.$modal.msgSuccess('操作成功');
              this.getWechartQr()
            }
          })
        },
        handleReject(row) {
          delBinding(row.id).then((res) => {
            if (res.code !== 200) {
              this.$modal.msgError(response.msg);
            } else {
              this.$modal.msgSuccess('操作成功');
              this.getWechartQr()
            }
          })
        },
        handleDelete(row) {
          delBinding(row.id).then((res) => {
            if (res.code !== 200) {
              this.$modal.msgError(response.msg);
            } else {
              this.$modal.msgSuccess('操作成功');
              this.getWechartQr()
            }
          })
        },
        close() {
            this.$tab.closePage();
        }
    }
};
</script>
